<div
#anchorRef
[class.side-menu]="isReadOnly"
[style.left.px]="LogicClient.options.X "
[style.top.px]="LogicClient.options.Y"
>
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/client.svg">
    </div>    
</div>
<div *ngIf="isReadOnly" 
[style.left.px]="LogicClient.options.X "
[style.top.px]="LogicClient.options.Y" class="read-only-controls">
    <button class="icon" (click)="sendData()" *ngIf="canSend">
        <img src="./assets/send.svg">
    </button>
    <button *ngIf="canEstablishConnection"(click)="establishConnection()">
        Establish<br>Connection
    </button>
    <button class="bottom" *ngIf="canEndConnection"(click)="endConnection()">
        End<br>Connection
    </button>
</div>
<div style="display:none">
    <div #options>
        <div>
            <div class="options-endpoint">
                <span class="property-name endpoint-title">Target Endpoint: <info-tooltip [Message]="'The endpoint that data will be sent to using selected method.'"></info-tooltip></span>
                <div class="endpoint-protocol">
                    <span>{{ Protocol[protocol] }}</span>
                </div>
            </div>
            <div class="options-endpoint">
                <mat-form-field appearance="fill" class="endpoint-url">
                    <mat-select #endpointSelect (selectionChange)="handleEndpointChange()" [(ngModel)]="LogicClient.options.endpointRef.endpoint">
                      <mat-option *ngFor="let endpoint of availableEndpoints" [value]="endpoint">{{endpoint.url}}</mat-option>
                    </mat-select>
                    <ng-template #emptyEndpoint>
                        <mat-select value="/" disabled>
                            <mat-option value="/">/</mat-option>
                        </mat-select>
                    </ng-template>
                </mat-form-field>
                <mat-form-field style="display: flex;" appearance="fill" class="endpoint-method">
                    <mat-select (selectionChange)="afterChange()" [(ngModel)]="LogicClient.options.endpointRef.method" #methodSelect>
                      <mat-option *ngFor="let method of availableMethods" [value]="method">{{ formatMethod(HTTPMethod[method+''], protocol == Protocol.Database) }}</mat-option>
                    </mat-select>
                    <ng-template #emptyMethod>
                        <mat-select value="GET" disabled>
                            <mat-option value="GET">GET</mat-option>
                        </mat-select>
                    </ng-template>
                </mat-form-field>
            </div>
        </div>
        <slider-described class="mt"
        [Model]="LogicClient"
        [Title]="'Output rate'"
        [Property]="'outputRate'"
        [AfterChange]="afterChange"
        [Tooltip]="'Change the speed at which data is sent.'"
        ></slider-described>
    </div>
    <div #actions>
        <div class="options-actions">
            <div class="actions-container">
                <button *ngIf="canEstablishConnection"
                 (click)="establishConnection()">Establish Connection</button>
                <button *ngIf="canEndConnection"
                 (click)="endConnection()">End Connection</button>
                <div>
                    <button [disabled]="!canSend"
                    (click)="sendData()">Send Data</button>
                    <span [class.active]="isAutomaticSending" [class.inactive]="!isAutomaticSending" [class.disabled]="!canSend" (click)="toggleAutomaticSend()" class="options-button-icon inactive auto-send"><i class="fas fa-sync-alt"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>